<template>
  <div>
    <h1>等级表展示</h1>
    <div>
      等级<input type="text" v-model="info.level"/>
      权益<input type="text" v-model="info.reigh"/>
      <input type="button" class="btn btn-primary" value="查询" @click="getlist,page(1)"/>
    </div>
    <table class="table table-bordered">
      <tbody>
      <tr style="background:yellow;">
        <td>编号</td>
        <td>等级名称</td>
        <td>权益</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data.list" :key="i.Id">
        <td>{{i.Id}}</td>
        <td>{{i.LevelName}}</td>
        <td>{{i.ReighName}}</td>
        <td>{{i.LevelState?"启用":"禁用"}}</td>
        <td>
          <input type="button" class="btn btn-danger" value="删除" @click="del(i.Id)"/>
          <input type="button" class="btn btn-warning" value="修改状态"  @click="sta(i.Id)"/>
        </td>
      </tr>
      </tbody>
    </table>

    <div>

    </div>
    <span>共<b>{{data.totalcount}}</b>条</span>
    <span>共<b>{{data.totalpage}}</b>页</span>
    <span>当前<b>{{info.pageindex}}</b></span>/<span><b>{{data.totalpage}}</b>页</span>

    <input type="button" class="btn btn-success" value="首页" @click="page(1)"/>
    <input type="button" class="btn btn-success" value="上一页" @click="page(info.pageindex-1)"/>
    <span v-for="i in data.totalpage" @click="page(i)">{{i}}</span>
    <input type="button" class="btn btn-success" value="下一页" @click="page(info.pageindex+1)"/>
    <input type="button" class="btn btn-success" value="尾页" @click="page(data.totalpage)"/>

    <input type="number" v-model="info.pageindex"/>
    <input type="button" value="跳转" @click="page(info.pageindex)" class="btn btn-success"/>
    <select v-model="info.pagesiez" @change="getlist">
      <option value="">请选择</option>
      <option v-for="i in arr" :value="i">当前{{i}}条</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from "axios";
import moment from "moment";
import {useRoute,useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()

let arr:any=ref([2,4,6,8])
const page=(num:any)=>{
  if(num<1)
  {
    info.pageindex=1
    return;
  }
  if(num>data.totalpage)
  {
    info.pageindex=data.totalpage
    return;
  }
 info.pageindex=num
  getlist();
}
onMounted(() => {
  getlist();
})

//接受数据
let data:any=reactive({
  totalcount:"",
  totalpage:'',
  list:[]
})
//发送数据
let info:any=reactive({
  pageindex:1,
  pagesiez:2,
  level:"",
  reigh:"",
})
const getlist=()=>{
  axios({
    url:"https://localhost:7032/api/User/GetLevel",
    method:"get",
    params:info,
  }).then(res=>{
    console.log(res)
    data.list=res.data.list;
    data.totalcount = res.data.totalcount;
    data.totalpage = res.data.totalpage;
  })
}
const del=(id:any)=> {
  let f = confirm("确认删除")
  if (f) {
    axios({
      url: "https://localhost:7032/api/User/DelLevel",
      method: "delete",
      params: {id: id}
    }).then(res => {
      console.log(res)
      if (res.data > 0) {
        alert("删除成功")
        getlist();
        return;
      } else {
        alert("删除失败")
        return;
      }
    })
  }
}
const sta=(id:any)=> {
  let f = confirm("确认修改")
  if (f) {
    axios({
      url: "https://localhost:7032/api/User/StateLevel",
      method: "put",
      params: {id: id}
    }).then(res => {
      console.log(res)
      if (res.data > 0) {
        alert("修改成功")
        getlist();

      } else {
        alert("修改失败")
        return;
      }
    })
  }
}

</script>

<style scoped>
span{
  margin: 0 10px;

}
b{
  color:red;
}
</style>